<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>relax易</title>
	<!-- 引入vue.js -->
	<script src="https://cn.vuejs.org/js/vue.js"></script>
    <link th:href="@{/static/css/index.css}" rel="stylesheet" type="text/css">
<!--    <link rel="stylesheet" href="../static/css/index.css">-->
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<link rel="stylesheet" href="../static/layui/css/layui.css">
	<script src="../static/layui/layui.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="http://cdn.bootcss.com/gsap/1.19.0/TweenMax.min.js"></script>
    <script src="http://cdn.bootcss.com/gsap/1.19.0/plugins/ScrollToPlugin.min.js"></script>
</head>

<body>
    <div id="index">
        <span th:text="${session.user.getUser_id()}" hidden="hidden" id="user_id_span"></span>
        <div class="head">
            <div class="logo">
                <span>欢迎</span>
            </div>
            <div class="head_right">
                <div class="head_right_first">
                    <img :src="user.user_img" @click="person()" class="user_img">
                </div>
<!--                <div class="user_name" th:text="${session.user.getUser_name()}"></div>-->
                <div class="user_name"> {{user.user_name}} </div>
                <div style="margin-left: 25px;" @click="want_buy()">想要</div>
                <div>|</div>
                <div @click="want_sell()">想卖</div>
                <div>|</div>
                <div @click="alreadySell()">晒出</div>
                <div>|</div>
                <div @click="quit()" id="message">退出</div>
            </div>
        </div>
        <hr>
        <div>
            <div class="search_area">
                <div>
                    <input type="" name="" id="" value="" placeholder="搜索想要" v-model="searchName" @keyup.enter="searchGoodsByName()"/>
                    <button type="button" @click="searchGoodsByName()">搜索</button>
                </div>
            </div>
            <div class="left_navigation">
               <div>
                   <div v-for="item in typeList" @click="typeCheck(item)">{{item}}</div>
               </div>

            </div>
            <div class="goods_show">
                <div class="goods_box" title="点击查看详情" v-for="goods in goodsList"  @click="look(goods)">
                    <div>
                        <img :src="goods.goods_picture" class="goods_picture">
                    </div>
                    <div class="goods_describe">
                        {{goods.goods_describe}}
                    </div>
                    <div class="goods_price">
                        ￥{{goods.goods_price}}
                    </div>
                    <div class="older">
<!--                        原主人{{goods.user_id}}-->
                        商品ID:{{goods.goods_id}}
                        <span hidden="hidden"  class="goods_id_span">{{goods.goods_id}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div id="shangxia2">
				<span id="gotop1">
					<img src="../static/img/huojian.svg" alt="返回顶部小火箭">
                    <!-- <img src="img/rocked.png" alt="返回顶部小火箭"> -->
				</span>
        </div>
    </div>
</body>
<script>
    this.user_id=document.getElementById("user_id_span").innerText;
    axios.get("/user?user_id="+user_id).then(
        function (response) {
            app.user=response.data;
        },function (err) {
            console.log(err);
        }
    );
    layer.tips('点击我可以查看或修改个人信息', '.user_img');
    axios.get("/queryAllGoods").then(function (response) {
        app.goodsList=response.data;
    },function (err) {
        console.log(err);
    })
	var app=new Vue({
		el:"#index",
		data:{
		    goodsList:"",
            typeList:['电器','数码','鞋服','美妆','食品','运动','图书','其他'],
            searchName:"",
            user: {}
		},
		methods:{
			look:function(a){
                console.log(a);
                layui.use('layer', function(){
                    var layer = layui.layer;
                    layer.open({
                        type:2,
                        title:'商品详情页',
                        content:'/goods_details',
                        area: ['755px', '500px'],
                        shade: [0.8, '#393D49'],
                        resize:false,
                        success:function (layero,index) {
                            var iframe = window['layui-layer-iframe' + index];
                            iframe.child(a)
                        }

                    })
                });
			},
            want_sell:function () {
                layui.use('layer', function(){
                    var layer = layui.layer;
                    layer.open({
                        type:2,
                        title:'我想卖',
                        content:'/want_sell',
                        scrollbar: false,
                        area: ['600px', '600px'],
                        shade: [0.8, '#393D49'],
                        resize:false,
                        success:function (layero,index) {

                        }

                    })
                });
            },
            person:function(){
                layui.use('layer', function(){
                    var layer = layui.layer;
                    layer.open({
                        type:2,
                        title:'个人信息',
                        content:'/person',
                        scrollbar: false,
                        area: ['600px', '600px'],
                        shade: [0.8, '#393D49'],
                        resize:false,
                        success:function (layero,index) {

                        }
                    })
                });
            },
            want_buy:function () {
                layui.use('layer', function(){
                    var layer = layui.layer;
                    layer.open({
                        type:2,
                        title:'想要',
                        content:'/want_buy',
                        scrollbar: false,
                        area: ['560px', '600px'],
                        shade: [0.8, '#393D49'],
                        resize:false,
                        success:function (layero,index) {

                        }
                    })
                });
            },
            quit:function () {
                layer.confirm('确认退出？', {
                    btn: ['确定','取消'] //按钮
                }, function(){//确定
                    axios.get("/quit").then(function (response) {
                        if (response.status=== 200){
                            layer.msg('退出成功', {icon: 1});
                            window.location.href="/login";
                        }else {
                            layer.msg('系统异常,退出失败', {icon: 2});
                        }
                    },function (err) {
                        console.log(err);
                    })
                }, function(){//取消
                    layer.msg('操作取消', {
                        time: 20000, //20s后自动关闭
                        btn: ['好的']
                    });
                });
            },
            typeCheck:function (type) {

			    axios.get("/findGoodsByType?goods_type="+type).then(function (response) {
                    app.goodsList=response.data;
                    if(response.data.length === 0){
                        layer.msg("暂无该类宝贝,先去逛逛其他的吧~")
                    }

                },function (err) {
                    console.log(err);
                })
            },
            searchGoodsByName:function () {
			    axios.get("/searchGoodsByName?keywords="+this.searchName).then(function (response) {
                    app.goodsList=response.data;
                    if(response.data.length === 0){
                        layer.msg("换个关键字搜搜吧~")
                    }
                },function (err) {
                    console.log(err);
                })
            },
            alreadySell:function () {
                layui.use('layer', function(){
                    var layer = layui.layer;
                    layer.open({
                        type:2,
                        title:'晒出',
                        content:'/alreadySell',
                        scrollbar: false,
                        area: ['560px', '600px'],
                        shade: [0.8, '#393D49'],
                        resize:false,
                        cancel : function() {
                            window.parent.location.reload();
                        },
                        success:function (layero,index) {

                        }
                    })
                });
            }
		}
	});
    $(function() {

        // 返回顶部，绑定gotop1图标和gotop2文字事件
        $("#gotop1").click(function(e) {
            TweenMax.to(window, 1.5, {scrollTo:0, ease: Expo.easeInOut});
            var huojian = new TimelineLite();
            huojian.to("#gotop1", 1, {rotationY:720, scale:0.6, y:"+=40", ease:  Power4.easeOut})
                .to("#gotop1", 1, {y:-1000, opacity:0, ease:  Power4.easeOut}, 0.6)
                .to("#gotop1", 1, {y:0, rotationY:0, opacity:1, scale:1, ease: Expo.easeOut, clearProps: "all"}, "1.4");
        });

    });
</script>

</html>